<template>
	<div class="articel">
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><router-link to="/">文章管理</router-link></el-breadcrumb-item>
			<el-breadcrumb-item>文章列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片 -->
		<!-- 
			shadow="hover" - 鼠标悬停显示卡片阴影
		 -->
		<el-card class="card" shadow="hover">
			<!-- 表格 -->
			<!-- 
				data - 数据对象
				border - 显示边框
				stripe - 斑马纹
				highlight-current-row - 悬停和选中的高光
			 -->
			<el-table
				:data="postList"
				border
				stripe
				style="width: 100%"
				max-height="500"
				highlight-current-row
			>
				<!-- 
					prop - 数据对象
					label - 标题
					sortable - 开启排序
				-->
				<el-table-column prop="id" label="ID" min-width="100" sortable></el-table-column>
				<el-table-column prop="title" label="标题" min-width="400"></el-table-column>
				<el-table-column prop="type" label="类型" min-width="100" sortable>
					<template slot-scope="scope">
						{{ scope.row.type === 1 ? '文章' : '视频' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="user.nickname"
					label="作者"
					min-width="200"
					sortable
				></el-table-column>
				<el-table-column min-width="200" label="操作">
					<template slot-scope="scope">
						<el-button type="success" plain @click="editFn(scope.row)" class="edit">
							编辑
						</el-button>
						<el-popconfirm
							confirm-button-text="好的"
							@confirm="delFn(scope.row)"
							cancel-button-text="不用了"
							icon="el-icon-info"
							icon-color="red"
							title="确定删除吗？"
						>
							<el-button slot="reference" type="danger" plain>删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="block">
				<!-- 
						layout - 功能模块
							—— total - 总页码
							—— sizes - 设置页容量
							—— prev - 上一页
							—— pager - 页码
							—— next - 下一页
							—— jumper - 跳页
						background - 背景色
						page-size - 页容量
						page-sizes - 页容量数组
						current-page - 默认选中页码
						hide-on-single-page - 只有一页时隐藏
					 -->
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					:total="total"
					layout="total, sizes, prev, pager, next, jumper"
					background
					class="page-size"
				></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
import { getNewsAPI } from '@/api/article.js';
export default {
	data() {
		return {
			postList: [],
			visible: false,
			total: 0,
			pageIndex: 1,
			pageSize: 10,
			pageSizes: [10, 15, 20]
		};
	},
	async created() {
		// 获取总条数
		const { length } = (await getNewsAPI({ pageSize: 1000 })).data.data;
		this.total = length;
		this.pageSizes.push(length);
		this.init();
	},
	methods: {
		// 获取文章
		async init() {
			this.postList = (await getNewsAPI({
				pageIndex: this.pageIndex,
				pageSize: this.pageSize
			})).data.data;
		},
		// 编辑文章
		editFn(item) {
			console.log(item.id);
			this.$router.push(`/publish?id=${item.id}`);
		},
		// 删除文章
		delFn(item) {
			this.visible = true;
		},
		// 页容量改变时函数
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pageSize = val;
			this.init();
		},
		// 页码改变函数
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.pageIndex = val;
			this.init();
		}
	}
};
</script>

<style scoped lang="less">
.card {
	margin-top: 20px;
}
.edit {
	margin-right: 10px;
}
.page-size {
	margin: 30px;
	display: flex;
	justify-content: flex-end;
}
</style>
